<template>
	<view class="lucky_draw">
		<uni-nav-bar class="navbar" v-show="showNav" fixed status-bar :border="false" left-icon="left" title="天天幸运站"
			@clickLeft="back" />
		<view class="red_envelope" v-if="task.module_type==2">
			<image src="https://draw.rxkjcn.com/upload/template/photo/yi.png"></image>
		</view>
		<swiper autoplay circular class="swiper" v-else>
			<swiper-item class="img_info" v-for="(d,index) in draw" :key="index">
				<prizeInfo :prize="d"></prizeInfo>
			</swiper-item>
		</swiper>


		<template v-if="task.module_type==2">
			<view class="involved">已有 <text>{{all_user_num}}</text> 人参与,还差
				<text>{{all_num-all_user_num}}</text> 人参与即可开奖
			</view>
			<view class="fenge"></view>
			<lotteryInfo :draw="draw"></lotteryInfo>
		</template>
		<view class="help" v-if="help!==null">
			<view class="fg"></view>
			<text class="btn">支持助力</text>
		</view>
		<template v-if="task.module_type==4">
			<view class="fenge"></view>
			<draw :tastId="tastId"></draw>
		</template>
		<view class="fenge"></view>
		<sponsor :sponsor="sponsor"></sponsor>
		<view class="fenge"></view>
		<view class="description">
			<view class="tit">抽奖说明</view>
			<view class="con">{{task.introduce}}</view>
		</view>
		<view class="fenge"></view>
		<prizeDetail :introduce_photo="introduce_photo" :introduce_text="introduce_text"></prizeDetail>
		<part :taskId="tastId"></part>
		<help v-if="help!==null" :help="help"></help>
		<button class="fenxiang_btn" open-type="share"><text class="iconfont icon-fenxiang" />分享抽奖</button>
		<view class="shangshouye"><button class="btn" @click="goPreviousHomePage">我要上首页</button></view>
	</view>
</template>
<script>
	import sponsor from './sponsor';
	import prizeInfo from './prizeInfo';
	import draw from './draw';
	import prizeDetail from './prizeDetail';
	import part from './part';
	import help from './help';
	import lotteryInfo from './lotteryInfo';
	export default {
		components: {
			lotteryInfo,
			sponsor,
			prizeInfo,
			draw,
			part,
			prizeDetail,
			help
		},
		data() {
			return {

				domain: uni.imgPath,
				tastId: "",
				draw: [],
				sponsor: {},
				help: null,
				introduce_text: "",
				introduce_photo: "",
				all_num: 0,
				user_num: 0,
				all_user_num: 0,
				task: {}
			}
		},
		computed: {
			showNav: function() {
				return uni.$store.state.showNav
			}
		},
		methods: {


			getNum() {
				uni.$http.post('/wxuser/index/getNum', {
					id: this.tastId
				}).then(res => {
					var data = res.data.data;
					this.user_num = data.user_num;
					this.all_user_num = data.all_user_num;

				})
			},
			goPreviousHomePage() {
				uni.navigateTo({
					url: '/pagesMy/previousHomePage/index',
				});
			},
			back() {
				uni.navigateBack();
			},
			init() {
				const url = `/user/public/taskInfo?task_id=${this.tastId}`
				uni.$http.get(url).then(res => {
					const {
						data
					} = res.data || {};
					this.all_num = data.config.all_num;
					this.draw = data.draw;
					this.task = data.task;
					this.help = data.help;
					this.sponsor = data.sponsor;
					this.introduce_text = data.task.introduce_text;
					this.introduce_photo = data.task.introduce_photo;

				})
				this.getNum();
			}
		},
		onLoad(options) {
			this.tastId = options.tastId;
			this.init();
		},
		onShow(options) {

		}
	}
</script>
<style lang="scss" scoped>
	.lucky_draw {
		padding-bottom: 100rpx;

		.red_envelope {
			image {
				width: 100%;
				height: 300rpx;
			}
		}

		.navbar {
			position: relative;
			z-index: 9998;
		}

		swiper {
			background-color: #fff;
			height: 450rpx;
			padding: 20rpx;

			swiper-item {

				color: #868686;
			}
		}

		.help {
			background: #fff;
			padding: 0 40rpx 30rpx 40rpx;

			.fg {
				border-top: 1px solid #EEE;
				padding-top: 20rpx;
			}

			.btn {
				display: inline-block;
				width: 113rpx;
				height: 34rpx;
				line-height: 34rpx;
				color: #FF8E6C;
				font-size: 22rpx;
				text-align: center;
				background: #FFE6DB;
				border-radius: 22rpx;
				opacity: 1;
				border: 1px solid #FFB289;
			}

		}

		.involved {
			background: #fff;
			padding: 20rpx;
			text-align: center;
			font-size: 30rpx;

			text {
				font-weight: bold;
				margin: 0 8rpx;
			}
		}

		.fenge {
			background: #F5F5F5;
			height: 20rpx
		}





		.description {
			position: relative;
			padding: 20rpx;
			background-color: #fff;

			.tit {
				padding-bottom: 20rpx;
				border-bottom: 1px solid #DDD;
				font-weight: bold;
				font-size: 28rpx;
			}

			.con {
				padding: 20rpx 0;
				font-size: 24rpx;

				p {
					line-height: 50rpx;
				}
			}

		}

		.lucky_btn {
			display: inline-block;
			line-height: 50rpx;
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			z-index: 9;
			border: 1px solid #01C168;
			font-size: 30rpx;

		}

		.img_info {
			border-bottom: 1px solid #EEE;
		}

		.fenxiang_btn {
			margin-top: 20rpx;
			width: 205rpx;
			height: 53rpx;
			line-height: 53rpx;
			border-radius: 50rpx;
			padding: 0;
			border: 1px solid #356BFA;
			color: #356BFA;
			font-size: 28rpx;
			text-align: center;

			text {
				margin-right: 10rpx;
				font-size: 24rpx;
			}
		}

		.shangshouye {
			display: flex;
			justify-content: center;
			margin: 20rpx 0;

			.btn {
				text-align: center;
				width: 265rpx;
				height: 44rpx;
				color: #fff;
				font-size: 28rpx;
				line-height: 44rpx;
				background: linear-gradient(180deg, #356AFA 0%, #34B8FD 100%);
			}


		}
	}
</style>